import React from 'react'
import Header3DCard from './Header3DCard';
import { OrbitingCircles } from "@/components/magicui/orbiting-circles";
import { assets } from '../assets/assets';
import Image from 'next/image';
import { motion } from 'motion/react';
import { MorphingText } from "@/components/magicui/morphing-text";


const Header = () => {
  return (
    <div id='home' className='w-full min-h-screen text-center mx-auto relative justify-center items-center flex'>
      <motion.div 
      initial={{opacity: 0,scale: 0}}
      animate={{opacity: 1,scale:1}}
      exit={{ opacity: 0, scale: 0 }}
      className="hidden absolute inset-0 md:flex flex-col items-center justify-center mt-20 ">
        {/* <HeaderBgCircles /> */}

          <OrbitingCircles iconSize={120} radius={300} speed={2}>
              <Image alt='' src={assets.cq_logo}/>
          </OrbitingCircles>
          <OrbitingCircles iconSize={400} radius={300} speed={1}>
              <Image alt='' src={assets.me} className='rounded-full w-60 h-60'/>
          </OrbitingCircles>
          <OrbitingCircles  radius={280} >
              <Image alt='' src={assets.github} className='rounded-full' />
              <Image alt='' src={assets.vscode} className='rounded-full'/>
          </OrbitingCircles> 
          <OrbitingCircles  radius={260} >
          </OrbitingCircles> 
          <OrbitingCircles  radius={240} >
          </OrbitingCircles> 
          <OrbitingCircles  radius={220} >
          </OrbitingCircles> 
      </motion.div >
      <motion.div 
      initial={{opacity: 0,scale: 0}}
      animate={{opacity: 1,scale:1}}
      exit={{ opacity: 0, scale: 0 }}
      className="hidden absolute inset-0 md:flex items-center justify-center mt-20">
        <Header3DCard />
      </motion.div>

    {/* mobile phone */}
    <div className='md:hidden w-11/12 max-w-3xl text-center mx-auto h-screen flex flex-col items-center justify-center gap-4 '>
      <motion.div
      initial={{scale: 0}}
      whileInView={{scale:1}}
      transition={{duration:0.8, type:'spring', stiffness:100}}
      >
        <Image src={assets.me} alt='' className='rounded-full w-32'/>
      </motion.div>

      <motion.h3
      initial={{y:-20, opacity: 0}}
      whileInView={{y:0, opacity:1}}
      transition={{duration:0.6, delay:0.3}}
      className='flex items-center gap-2 text-xl md:text-2xl mb-3 font-RDaKai'
      >
        Hi!I'm Benny,please use the computer for a better experience.<Image src={assets.hand_icon} alt='' className='w-6'/>
      </motion.h3>
      <motion.h1
      initial={{y:-30, opacity: 0}}
      whileInView={{y:0, opacity:1}}
      transition={{duration:0.8, delay:0.5}}
        className="text-3xl sm:text-6xl lg:text-[66px] font-Ovo">I am a/an <MorphingText texts={['Student', 'Developer', 'Singer', 'Youtuber']} /> in Chongqing.</motion.h1>
      
      <div className='flex flex-col sm:flex-row items-center gap-4 mt-4'>
        <motion.a
        initial={{y:30, opacity: 0}}
        whileInView={{y:0, opacity:1}}
        transition={{duration:0.6, delay:1}}
        href="#contact" 
        className="px-10 py-3 border border-white rounded-full bg-black text-white flex items-center gap-2 dark:bg-transparent"
        >contact me <Image src={assets.right_arrow_white} alt="" className="w-4" />
        </motion.a>

        <motion.a 
        initial={{y:30, opacity: 0}}
        whileInView={{y:0, opacity:1}}
        transition={{duration:0.6, delay:1.2}}
        href="/sample-resume.pdf" download className="px-10 py-3 border rounded-full border-gray-500 flex items-center gap-2 bg-white dark:text-black">my resume <Image src={assets.download_icon} alt="" className="w-4" /></motion.a>
      </div>
    </div>


    </div>
  )
}

export default Header
